<!DOCTYPE html>
<html lang="en-US" dir="ltr">
	<head>
		<meta charset="utf-8" />
		<title>Uix Kit Demo</title>	
        
		<!-- Mobile Settings
		============================================= -->
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
        <!-- Mobile Settings end -->
        
        
		<!-- Core library
		============================================= -->
		<script src="assets/js/wp-jquery/jquery.min.js?ver=2.1.3"></script>
		<script src="assets/js/wp-jquery/jquery.migrate.min.js?ver=1.4.1"></script>
        <script src="assets/js/min/prefixfree.min.js?ver=1.0.7"></script>
        <!-- Core library  end -->
        
        
        
        
        
		<!-- Compatibility
		============================================= -->
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        
        <script src="assets/js/min/modernizr.min.js?ver=3.5.0"></script>
        
        <!--[if lt IE 9]>
            <script src='assets/js/min/respond.min.js?ver=1.4.2'></script>
        <![endif]-->
        
        <!-- Compatibility  end -->



		<!-- Web Fonts
		============================================= -->
        <!-- <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,600,700,800" rel="stylesheet"> -->
        <!-- Web Fonts  end -->
        
		<!-- Core & Theme CSS
		============================================= -->
        
        <!-- Basic  -->
        <link rel="stylesheet" href="assets/css/bootstrap.min.css?ver=3.3.7" media="all"/>
        <link rel="stylesheet" href="assets/css/video.min.css?ver=5.19" media="all"/>
        <link rel="stylesheet" href="assets/css/flexslider.min.css?ver=2.6.2" media="all" />
		<link rel="stylesheet" href="assets/css/animate.min.css?ver=3.5.2" media="all" />
        
        
        <!-- Icons  -->
        <link rel="stylesheet" href="assets/fonts/fontawesome/font-awesome.min.css?ver=4.7" media="all" /> 
        
       
        <!-- Theme  -->
        <link rel="stylesheet" href="assets/css/uix-kit.min.css?ver=MTUyMjIwODEwNDM1Mg"/>
        
        
         <!--[if lt IE 10]>
           <link rel="stylesheet" href="assets/css/uix-kit.IE.css?ver=MTUyMjIwODEwNDM1Mg" />
        <![endif]-->
        
        
        <!-- Core & Theme CSS  end -->
        
            
            
		<!-- SEO
		============================================= -->
        <meta name="description" content="Free Responsive HTML5 UI Kit for Fast Web Design Based On Bootstrap">
        <meta name="generator" content="Uix Kit" />  
        <meta name="author" content="UIUX Lab"> 
        <link rel="canonical" href="https://uiux.cc" />
        <!-- SEO  end -->
  
        
		<!-- Favicons
		============================================= -->
        <link rel="icon" href="assets/images/favicon/favicon-32x32.png" type="image/x-icon">
        <link rel="shortcut icon" href="assets/images/favicon/favicon-32x32.png" sizes="32x32">
        <link rel="apple-touch-icon" href="assets/images/favicon/apple-touch-icon-57x57.png">
        <link rel="apple-touch-icon" sizes="72x72" href="assets/images/favicon/apple-touch-icon-72x72.png">
        <link rel="apple-touch-icon" sizes="114x114" href="assets/images/favicon/apple-touch-icon-114x114.png">
        <!-- Favicons  end -->
     
  
  </head>     
  
     
  <body class="page">
  
  
          
              
    <!-- Loader
    ============================================= -->      
    <div class="loader">
        <!--[if lt IE 10]>
            <span>Loading...</span>
        <![endif]-->
        <svg class="spinner-container IE-hide" viewBox="0 0 52 52">
			<path d="M25.251,6.461c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615V6.461z"></path>
        </svg>
    </div>
    <!-- .loader end -->
    

    <!-- Mobile Menu Toggle
    ============================================= -->    
	<div class="menu-mobile-toggle">
		<span></span>
		<span></span>
		<span></span>
	</div>
    <div class="menu-mobile-mask"></div>
	<!-- .menu-mobile-toggle end -->


    
    

  
   
    <div class="wrapper">
    
        <!-- Header Area
        ============================================= -->      
        <header class="header-area transition">
            
             <div class="header-container transition">
                 <div class="container">
                 
                                                <div class="brand">
                            <a href="index.html"><img src="assets/images/logo.png" alt="Uix Kit Demo"></a>                       
                        </div>
                        <!-- .logo end -->
                        
                        
                        
                        <!-- Navigation Start-->
                        
                        <nav class="menu-container transition">
                               
                               <div class="inner">
                               
									<span class="mobile-brand"></span>
									<ul class="menu-main"> 
										<li class="multi-column current-menu-item"><a href="index.html">Components</a>
											<ul class="sub-menu">
												<li>
													<ul class="sub-menu">
														<li><span class="multi-column-title">Grid &  Extension</span></li>
														<li><a href="seamless-grid.html">Seamless Grid</a></li>
														<li><a href="bootstrap-grid.html">Bootstrap Grid</a></li>
														<li><a href="material-container.html">Material Container</a></li>
													</ul>
													<!-- .sub-menu  end -->
												</li>
												<li>
													<ul class="sub-menu">
														<li><span class="multi-column-title">Contents</span></li>
														<li><a href="list-posts.html">Posts List</a></li>
														<li><a href="list-split-imagery.html">Fullwidth List of Split</a></li>
														<li><a href="list-side-by-side.html">Side by Side List</a></li>
														<li><a href="list-bulleted.html">Bulleted List</a></li>
														<li><a href="list-brands.html">Brands List</a></li>
														<li><a href="list-maintain-aspect-ratio.html">Maintain Aspect Ratio List</a></li>
														<li><a href="single-post.html">Single Post</a></li>
														<li><a href="sidebar.html">Sidebar</a></li>
														<li><a href="search.html">Search Box</a></li>
														<li><a href="contact.html">Contact Form</a></li>
														<li><a href="features.html">Features</a></li>
														<li><a href="pricing.html">Pricing</a></li>
														<li><a href="testimonials.html">Testimonials</a></li>
														<li><a href="multi-items-carousel.html">Easy Multiple Items Carousel</a></li>
														<li><a href="gallery.html">Gallery Normal</a></li>
														<li><a href="gallery-filter.html">Gallery Filterable</a></li>
														<li><a href="gallery-masonry.html">Gallery Masonry</a></li>
													</ul>
													<!-- .sub-menu  end -->
												</li>

												<li>
													<ul class="sub-menu">
														<li><span class="multi-column-title">Web Elements</span></li>
														<li><a href="button.html">Buttons</a></li>
														<li><a href="social-meida-icons.html">Social Media Icons</a></li>
														<li><a href="form.html">Form Elements</a></li>
														<li><a href="form-progress.html">Form Progress</a></li>
														<li><a href="timeline.html">Timeline</a></li>
														<li><a href="slideshow.html">Slideshow</a></li>
														<li><a href="slideshow2.html">Slideshow Fullscreen</a></li>
														<li><a href="card.html">Card</a></li>
														<li><a href="tabs.html">Tabs</a></li>
														<li><a href="accordion.html">Accordion</a></li>
														<li><a href="counter.html">Counter</a></li>
														<li><a href="video-background.html">Video BG</a></li>
														<li><a href="progress-bar.html">Progress Bar</a></li>
														<li><a href="modal-dialog.html">Modal UI</a></li>
														<li><a href="parallax.html">Parallax</a></li>
														<li><a href="parallax2.html">Parallax 2</a></li>
														<li><a href="scroll-reveal.html">Scroll Reveal</a></li>     
														<li><a href="periodical-scroll.html">Periodical Scroll</a></li>
														<li><a href="footer-templates.html">Footer Templates</a></li>
														
													</ul>
													<!-- .sub-menu  end -->
												</li>
												<li>
													<ul class="sub-menu">
														<li><span class="multi-column-title">Interaction</span></li>
														<li><a href="list-posts-with-ajax.html">Ajax Load Posts</a></li>
														<li><a href="list-posts-with-ajax-infinitescroll.html">Infinite Scroll Posts</a></li>
														<li><a href="tooltip.html">Tooltip</a></li>
														<li><a href="show-more-less.html">Show More Less</a></li>
														<li><a href="mousewheel-interaction.html">Mousewheel Interaction</a></li>
														<li><a href="simple-lightbox.html">Simple Lightbox</a></li>
														<li><a href="dynamic-dropdown-list-json.html">Dynamic Drop Down List</a></li>
														
														
														
													</ul>
													<!-- .sub-menu  end -->
												</li>

											
											</ul>

										</li>
										<li><a href="#">Menu</a>
											<ul class="sub-menu">
												<li><a href="mega-menu.html">Mega Menu</a></li>
												<li><a href="mega-menu-rtl.html">Mega Menu(RTL)</a></li>
												<li><a href="onepage-menu.html">Onepage Menu</a></li>
												<li><a href="secondary-responsive-menu.html">Secondary Responsive Menu</a></li>
												<li><a href="dropdown-menu.html">Dropdown Menu</a></li>

											</ul>
											<!-- .sub-menu  end -->
										</li>

										<li><a href="typography.html">Typography</a>
											<ul class="sub-menu">
												<li><a href="typography.html">LTR</a></li>
												<li><a href="typography-rtl.html">RTL</a></li>
												<li><a href="typography-cn.html">中文</a></li>

											</ul>
										</li>



									</ul>
									<div class="menu-right">
										<a class="social-btn small fillet thin" title="Follow us on Twitter" href="https://twitter.com/uiux_lab" target="_blank">
											<i class="fa fa-twitter"></i>
										</a>
										<a class="social-btn small fillet thin" title="Follow us on Facebook" href="https://www.facebook.com/uiuxlabhome" target="_blank">
											<i class="fa fa-facebook"></i>
										</a>
										<a class="social-btn small fillet thin" title="Fork on Github" href="https://github.com/xizon/uix-kit" target="_blank">
											<i class="fa fa-github"></i>
										</a>          
									</div>
                               
							   </div><!-- /.inner -->
        
                        </nav>
                        <!-- .menu-container end -->
                        
                 
                   
                        
                        
                        
                        
                  </div>
                  <!-- .container end -->
                  
                  <div class="clear"></div>
             </div>
        
        </header>
        <div class="header-inner auto-height"></div>
      
      
     
        <!-- Title
        ====================================================== -->
        <section class="space-sm">
            <div class="container t-c">
                    <div class="row">
                        <div class="col-md-8 col-md-offset-2 t-c">
                            <h2>Full Width & Custom CSS3 Transition Animation</h2>
							<p>Note: Touch-friendly Drag and Drop</p>
                            
                        </div>
                    </div>
                    <!-- .row end -->
              
                    
            </div>
            <!-- .container end -->
 
        </section>
     
     
       <!-- Slideshow
        ====================================================== -->
        <div class="custom-theme-flexslider custom-primary-flexslider" 
             data-draggable="true" 
             data-mynavthumbs="false"
             data-mycontrols="false"
             data-myshow="false"
             data-mycounttotal="false"
             data-mycountcur="false"
             data-myparallax="false"
             data-wheel="false"
             data-speed="600" 
             data-timing="10000" 
             data-loop="false" 
             data-paging="true" 
             data-arrows="true" 
             data-animation="slide" 
             data-auto="true" 
			 data-prev="<i class='fa fa-chevron-left custom-primary-flexslider-prev'></i>" 
             data-next="<i class='fa fa-chevron-right custom-primary-flexslider-next'></i>">
           
            <div class="custom-theme-slides">

                <div class="item">
                    <img src="assets-demo/images/slide-1.jpg" alt="Title 1" />
                    
                    <div class="slides-info">
                    
                        <div class="container t-c">
                                <div class="row">
                                    <div class="col-md-8 col-md-offset-2">
                                        <h2 class="level level-1">Beautiful Free &amp; Premium Responsive WordPress Themes</h2>
                                        <p class="h5 font-normal level level-2">Uix Responsive Web UI Frameworks</p>
    
                                    </div>
                                </div>
                                <!-- .row end -->
                        </div>


                    </div>
                    <!-- .slides-info  end -->   
                    
                </div>
                
                <div class="item">
                    <img src="assets-demo/images/slide-2.jpg" alt="Title 2" />
                    
                    <div class="slides-info">
                    
                        <div class="container t-c">
                                <div class="row">
                                    <div class="col-md-8 col-md-offset-2">
                                    
                                        <h2 class="level level-1">Hello World</h2>
                                        <p class="h5 font-normal level level-2">UIUX Lab carefully crafts original design assets and publishes articles about UI/UX trends!</p>
                                        <a class="button button-hover button-border-medium button-size-s level level-3" href="#">View Demo</a>
    
                                 
                                    </div>
                                </div>
                                <!-- .row end -->
                        </div>


                    </div>
                    <!-- .slides-info  end -->
                     
                </div>
                
                
                <div class="item">
                    <img src="assets-demo/images/slide-3.jpg" alt="Title 3" />
                    
                    <div class="slides-info">
                    
                        <div class="container t-c">
                                <div class="row">
                                    <div class="col-md-8 col-md-offset-2">
                                    
                                        <h2 class="level level-1">Title 3</h2>
                                        <p class="h5 font-normal level level-2">UIUX Lab carefully crafts original design assets and publishes articles about UI/UX trends!</p>
                                        <a class="button button-hover button-border-medium button-size-s level level-3" href="#">View Demo</a>
    
                                 
                                    </div>
                                </div>
                                <!-- .row end -->
                        </div>


                    </div>
                    <!-- .slides-info  end --> 
                    
                </div>
    

            </div>
            <!-- .custom-theme-slides end -->
        </div>
        <!-- .custom-theme-flexslider end -->

           
           
        <!-- Title
        ====================================================== -->
        <section class="space-sm">
            <div class="container t-c">
                    <div class="row">
                        <div class="col-md-8 col-md-offset-2 t-c">
                            <h2>Parallax Effect</h2>
                            <p>Set the <code>data-myparallax</code> property to make parallax effect.</p>
                        </div>
                    </div>
                    <!-- .row end -->
              
                    
            </div>
            <!-- .container end -->
 
        </section>
     
     
       <!-- Slideshow
        ====================================================== -->
        <div class="custom-theme-flexslider custom-parallax-flexslider" 
             data-draggable="true" 
             data-mynavthumbs="false"
             data-mycontrols="false"
             data-myshow="false"
             data-mycounttotal="false"
             data-mycountcur="false"
             data-myparallax="true"
             data-wheel="false"
             data-speed="1500" 
             data-timing="10000" 
             data-loop="false" 
             data-paging="true" 
             data-arrows="false" 
             data-animation="slide" 
             data-auto="true" 
			 data-prev="<i class='fa fa-chevron-left'></i>" 
			 data-next="<i class='fa fa-chevron-right'></i>"> 
           
            <div class="custom-theme-slides">

                <div class="item">
                    <img src="assets-demo/images/slide-1.jpg" alt="Title 1" />
					<img class="level level-1" src="assets-demo/images/300x250.png" alt="">
					<img class="level level-2" src="assets-demo/images/500x300.png" alt="">
                    
                </div>
                
                <div class="item">
                    <img src="assets-demo/images/slide-2.jpg" alt="Title 2" />
					<img class="level level-1" src="assets-demo/images/300x250.png" alt="">
					<img class="level level-2" src="assets-demo/images/500x300.png" alt="">
                     
                </div>
                
                
                <div class="item">
                    <img src="assets-demo/images/slide-3.jpg" alt="Title 3" />
					<img class="level level-1" src="assets-demo/images/300x250.png" alt="">
					<img class="level level-2" src="assets-demo/images/500x300.png" alt="">
                    
                </div>
    

            </div>
            <!-- .custom-theme-slides end -->
        </div>
        <!-- .custom-theme-flexslider end -->  
           
            
     
        <!-- Title
        ====================================================== -->
        <section class="space-none-bottom">
            <div class="container t-c">
                    <div class="row">
                        <div class="col-md-8 col-md-offset-2 t-c">
                            <h2>Default Options</h2>
							<p>Special Options Using <code>data-*</code> Attributes</p>
                        </div>
                    </div>
                    <!-- .row end -->
              
                    
            </div>
            <!-- .container end -->
 
        </section>
     
     
      
       <!-- Slideshow
        ====================================================== -->
        <section>
             <div class="container">
                    <div class="row">
                        <div class="col-md-8 col-md-offset-2">
                        
                                    <div class="custom-theme-flexslider"
										 data-draggable="false" 
										 data-mynavthumbs="false"
										 data-mycontrols="false"
										 data-myshow="false"
										 data-mycounttotal="false"
										 data-mycountcur="false"
										 data-myparallax="false"
										 data-wheel="false"
										 data-speed="600" 
										 data-timing="10000" 
										 data-loop="true" 
										 data-paging="true" 
										 data-arrows="true" 
										 data-animation="slide" 
										 data-auto="true" 
										 data-prev="<i class='fa fa-chevron-left'></i>" 
										 data-next="<i class='fa fa-chevron-right'></i>"> 
                                       
                                        <div class="custom-theme-slides">
                            
                                            <div class="item">
                                                <a href="#" rel="theme-slider-prettyPhoto[cat-1]"><img src="assets-demo/images/test-img-big-1.jpg" alt="Title 1" /></a>  
                                            </div>
                                            
                                            <div class="item">
                                                <a href="#" rel="theme-slider-prettyPhoto[cat-1]"><img src="assets-demo/images/test-img-big-2.jpg" alt="Title 2" /></a>
                                            </div>
                                            
                                            
                                            <div class="item">
                                                <a href="#" rel="theme-slider-prettyPhoto[cat-1]"><img src="assets-demo/images/test-img-big-3.jpg" alt="Title 3" /></a>
                                            </div>
                                
                            
                                        </div>
                                        <!-- .custom-theme-slides end -->
                                    </div>
                                    <!-- .custom-theme-flexslider end -->   

                        
                        
                        
                        </div>
                    </div>
              </div>    
        
      
      </section>
      
      

     
        <!-- Title
        ====================================================== -->
        <section class="space-none">
            <div class="container t-c">
                    <div class="row">
                        <div class="col-md-8 col-md-offset-2 t-c">
                            <h2>Video Slider</h2>
                            <p>Set the <code>data-embed-video-wrapper</code> property to listen for video play events.</p>
                            
                        </div>
                    </div>
                    <!-- .row end -->
              
                    
            </div>
            <!-- .container end -->
 
        </section>
     
      
       <!-- Slideshow With Video
        ====================================================== -->
        <section>
             <div class="container">
                    <div class="row">
                        <div class="col-md-8 col-md-offset-2">
                        
                                    <div class="custom-theme-flexslider" 
										 data-draggable="false" 
										 data-mynavthumbs="false"
										 data-mycontrols="false"
										 data-myshow="false"
										 data-mycounttotal="false"
										 data-mycountcur="false"
										 data-myparallax="false"
										 data-wheel="false"
										 data-speed="600" 
										 data-timing="20000" 
										 data-loop="false" 
										 data-paging="true" 
										 data-arrows="true" 
										 data-animation="slide" 
										 data-auto="true" 
										 data-prev="<i class='fa fa-chevron-left'></i>" 
										 data-next="<i class='fa fa-chevron-right'></i>"
                                         data-embed-video-wrapper="true"> 
                                       
                                        <div class="custom-theme-slides">
                            
                                            
                                            <div class="item">
												  <div class="web-video-embed" data-embed-video-width="auto" data-embed-video-height="auto" data-embed-video-controls="false" data-embed-video-autoplay="true" data-embed-video-loop="true">
													  <video id="video-demo-1" class="video-js vjs-default-skin" controls poster="assets-demo/videos/demo.jpg">
														  <source src="assets-demo/videos/1920x1080/demo.mp4" type="video/mp4">
														  <source src="assets-demo/videos/1920x1080/demo.webm" type="video/webm">
													  </video>
												  </div>
                                                
                                                
                                            </div>
                                            
                                            
                                            
                                            <div class="item">
												  <div class="web-video-embed" data-embed-video-width="auto" data-embed-video-height="auto" data-embed-video-controls="false" data-embed-video-autoplay="true" data-embed-video-loop="true">
													  <video id="video-demo-2" class="video-js vjs-default-skin" controls poster="assets-demo/videos/demo.jpg">
														  <source src="assets-demo/videos/1440x1050/demo.mp4" type="video/mp4">
														  <source src="assets-demo/videos/1440x1050/demo.webm" type="video/webm">
													  </video>
												  </div>
                                            </div>
                                
                            
                                        </div>
                                        <!-- .custom-theme-slides end -->
                                    </div>
                                    <!-- .custom-theme-flexslider end -->   

                        
                        
                        
                        </div>
                    </div>
              </div>    
        
      
      </section>
      
      
      
           
        <!-- Title
        ====================================================== -->
        <section class="space-none">
            <div class="container t-c">
                    <div class="row">
                        <div class="col-md-8 col-md-offset-2 t-c">
							<h2>Custom Navigation Buttons</h2>
                            <p>Set the <code>data-mycontrols</code> property to be used in lieu of dynamic controlNav.</p>
                        </div>
                    </div>
                    <!-- .row end -->
              
                    
            </div>
            <!-- .container end -->
 
        </section>
        
            
            
       <!-- Slideshow
        ====================================================== -->
        <section>
             <div class="container">
                    <div class="row">
                        <div class="col-md-8 col-md-offset-2">
                        
                                    <div class="custom-theme-flexslider"
										 data-draggable="false" 
										 data-mynavthumbs="false"
										 data-mycontrols=".my-nav-1"
										 data-myshow="false"
										 data-mycounttotal="false"
										 data-mycountcur="false"
										 data-myparallax="false"
										 data-wheel="false"
										 data-speed="600" 
										 data-timing="10000" 
										 data-loop="true" 
										 data-paging="true" 
										 data-arrows="true" 
										 data-animation="slide" 
										 data-auto="true" 
										 data-prev="<i class='fa fa-chevron-left'></i>" 
										 data-next="<i class='fa fa-chevron-right'></i>"> 
                                       
                                       
                                        <div class="custom-theme-slides">
                            
                                            <div class="item">
                                                <a href="#" rel="theme-slider-prettyPhoto[cat-1]"><img src="assets-demo/images/test-img-big-1.jpg" alt="Title 1" /></a>  
                                            </div>
                                            
                                            <div class="item">
                                                <a href="#" rel="theme-slider-prettyPhoto[cat-1]"><img src="assets-demo/images/test-img-big-2.jpg" alt="Title 2" /></a>
                                            </div>
                                            
                                            
                                            <div class="item">
                                                <a href="#" rel="theme-slider-prettyPhoto[cat-1]"><img src="assets-demo/images/test-img-big-3.jpg" alt="Title 3" /></a>
                                            </div>
                                
                            
                                        </div>
                                        <!-- .custom-theme-slides end -->
                                    </div>
                                    <!-- .custom-theme-flexslider end -->   
                                    
                                       
                                    <div class="custom-navigation my-nav-1">
                                        <a href="#" class="custom-theme-flex-prev"><i class="fa fa-chevron-left"></i></a>
                                        <div class="custom-controls-container my-nav-1"></div>
                                        <a href="#" class="custom-theme-flex-next"><i class="fa fa-chevron-right"></i></a>
                                    </div> 

                        
                        
                        </div>
                    </div>
              </div>   
      
      </section>    
            
        
           
            
        <!-- Title
        ====================================================== -->
        <section class="space-none">
            <div class="container t-c">
                    <div class="row">
                        <div class="col-md-8 col-md-offset-2 t-c">
							<h2>Multiple Items</h2>
							<p>Set the <code>data-myshow</code> property to control the number of items displayed.</p>
                            
                        </div>
                    </div>
                    <!-- .row end -->
              
                    
            </div>
            <!-- .container end -->
 
        </section>
            
            
       <!-- Slideshow
        ====================================================== -->
        <section>
             <div class="container">
                    <div class="row">
                        <div class="col-md-8 col-md-offset-2">
                        
                                    <div class="custom-theme-flexslider custom-itemgrid"
										 data-draggable="false" 
										 data-mynavthumbs="false"
										 data-mycontrols="false"
										 data-myshow="3"
										 data-mycounttotal="false"
										 data-mycountcur="false" 
										 data-myparallax="false"
										 data-wheel="false"
										 data-speed="600" 
										 data-timing="10000" 
										 data-loop="true" 
										 data-paging="true" 
										 data-arrows="true" 
										 data-animation="slide" 
										 data-auto="true" 
										 data-prev="<i class='fa fa-chevron-left'></i>" 
										 data-next="<i class='fa fa-chevron-right'></i>"> 
                                      	 
                                       
                                        <div class="custom-theme-slides">
                            
                                            <div class="item">
                                                <a href="#" rel="theme-slider-prettyPhoto[cat-1]"><img src="assets-demo/images/test-img-big-1.jpg" alt="Title 1" /></a>  
                                            </div>
                                            
                                            <div class="item">
                                                <a href="#" rel="theme-slider-prettyPhoto[cat-1]"><img src="assets-demo/images/test-img-big-2.jpg" alt="Title 2" /></a>
                                            </div>
                                            
                                            
                                            <div class="item">
                                                <a href="#" rel="theme-slider-prettyPhoto[cat-1]"><img src="assets-demo/images/test-img-big-3.jpg" alt="Title 3" /></a>
                                            </div>
                                
                                            <div class="item">
                                                <a href="#" rel="theme-slider-prettyPhoto[cat-1]"><img src="assets-demo/images/test-img-big-1.jpg" alt="Title 1" /></a>  
                                            </div>
                                            
                                            <div class="item">
                                                <a href="#" rel="theme-slider-prettyPhoto[cat-1]"><img src="assets-demo/images/test-img-big-2.jpg" alt="Title 2" /></a>
                                            </div>
                                            
                                            
                                            <div class="item">
                                                <a href="#" rel="theme-slider-prettyPhoto[cat-1]"><img src="assets-demo/images/test-img-big-3.jpg" alt="Title 3" /></a>
                                            </div>
                                            
                                            <div class="item">
                                                <a href="#" rel="theme-slider-prettyPhoto[cat-1]"><img src="assets-demo/images/test-img-big-1.jpg" alt="Title 1" /></a>  
                                            </div>
                                            
                                            <div class="item">
                                                <a href="#" rel="theme-slider-prettyPhoto[cat-1]"><img src="assets-demo/images/test-img-big-2.jpg" alt="Title 2" /></a>
                                            </div>
                                            
                                
                                            
                                            <div class="item">
                                                <a href="#" rel="theme-slider-prettyPhoto[cat-1]"><img src="assets-demo/images/test-img-big-1.jpg" alt="Title 1" /></a>  
                                            </div>
                                            
                                            <div class="item">
                                                <a href="#" rel="theme-slider-prettyPhoto[cat-1]"><img src="assets-demo/images/test-img-big-2.jpg" alt="Title 2" /></a>
                                            </div>
                                            
                                        </div>
                                        <!-- .custom-theme-slides end -->
                                        
                                    </div>
                                    <!-- .custom-theme-flexslider end -->   

                        
                        
                        </div>
                    </div>
              </div>    
        
      
      </section>        
                    
                    
                    
            
        <!-- Title
        ====================================================== -->
        <section class="space-none">
            <div class="container t-c">
                    <div class="row">
                        <div class="col-md-8 col-md-offset-2 t-c">
							<h2>Add Counter</h2>
                            <p>Set the <code>data-mycounttotal</code> and <code>data-mycountcur</code> property to display counter.</p>
                        </div>
                    </div>
                    <!-- .row end -->
              
                    
            </div>
            <!-- .container end -->
 
        </section>          
                    
                    
               
       <!-- Slideshow
        ====================================================== -->
        <section>
             <div class="container">
                    <div class="row">
                        <div class="col-md-8 col-md-offset-2">
                        
                                    <div class="custom-theme-flexslider"
										 data-draggable="false" 
										 data-mynavthumbs="false"
										 data-mycontrols="false"
										 data-myshow="false"
										 data-mycounttotal="p.count em.count"
										 data-mycountcur="p.count em.current"
										 data-myparallax="false"
										 data-wheel="true"
										 data-speed="600" 
										 data-timing="10000" 
										 data-loop="true" 
										 data-paging="true" 
										 data-arrows="true" 
										 data-animation="slide" 
										 data-auto="true" 
										 data-prev="<i class='fa fa-chevron-left'></i>" 
										 data-next="<i class='fa fa-chevron-right'></i>"> 	 
                                       
                                        <div class="custom-theme-slides">
                            
                                            <div class="item">
                                                <a href="#" rel="theme-slider-prettyPhoto[cat-1]"><img src="assets-demo/images/test-img-big-1.jpg" alt="Title 1" /></a>  
                                            </div>
                                            
                                            <div class="item">
                                                <a href="#" rel="theme-slider-prettyPhoto[cat-1]"><img src="assets-demo/images/test-img-big-2.jpg" alt="Title 2" /></a>
                                            </div>
                                            
                                            
                                            <div class="item">
                                                <a href="#" rel="theme-slider-prettyPhoto[cat-1]"><img src="assets-demo/images/test-img-big-3.jpg" alt="Title 3" /></a>
                                            </div>
                                
                                            <div class="item">
                                                <a href="#" rel="theme-slider-prettyPhoto[cat-1]"><img src="assets-demo/images/test-img-big-1.jpg" alt="Title 1" /></a>  
                                            </div>
                                            
                                            <div class="item">
                                                <a href="#" rel="theme-slider-prettyPhoto[cat-1]"><img src="assets-demo/images/test-img-big-2.jpg" alt="Title 2" /></a>
                                            </div>
                                            
                                            
                                            <div class="item">
                                                <a href="#" rel="theme-slider-prettyPhoto[cat-1]"><img src="assets-demo/images/test-img-big-3.jpg" alt="Title 3" /></a>
                                            </div>
                                            
                                            <div class="item">
                                                <a href="#" rel="theme-slider-prettyPhoto[cat-1]"><img src="assets-demo/images/test-img-big-1.jpg" alt="Title 1" /></a>  
                                            </div>
                                            
                                            <div class="item">
                                                <a href="#" rel="theme-slider-prettyPhoto[cat-1]"><img src="assets-demo/images/test-img-big-2.jpg" alt="Title 2" /></a>
                                            </div>
                                            
                                
                                            
                                            <div class="item">
                                                <a href="#" rel="theme-slider-prettyPhoto[cat-1]"><img src="assets-demo/images/test-img-big-1.jpg" alt="Title 1" /></a>  
                                            </div>
                                            
                                            <div class="item">
                                                <a href="#" rel="theme-slider-prettyPhoto[cat-1]"><img src="assets-demo/images/test-img-big-2.jpg" alt="Title 2" /></a>
                                            </div>
                                            
                                        </div>
                                        <!-- .custom-theme-slides end -->
                                    </div>
                                    <!-- .custom-theme-flexslider end -->   


									<p class="count">
										<em class="current"></em> of <em class="count"></em>
									</p>   
                        
                        
                        </div>
                    </div>
              </div>    
        
      
      </section>        
                                                   
           
           
        <!-- Title
        ====================================================== -->
        <section class="space-none">
            <div class="container t-c">
                    <div class="row">
                        <div class="col-md-8 col-md-offset-2 t-c">
							<h2>Thumbnail ControlNav Pattern</h2>
                            <p>Set the <code>data-mynavthumbs</code> property to match a simple pattern.</p>
                        </div>
                    </div>
                    <!-- .row end -->
              
                    
            </div>
            <!-- .container end -->
 
        </section>
        
            
            
       <!-- Slideshow
        ====================================================== -->
        <section>
             <div class="container">
                    <div class="row">
                        <div class="col-md-8 col-md-offset-2">
                        
                                    <div class="custom-theme-flexslider"
										 data-draggable="false" 
										 data-mynavthumbs=".my-navthumbs-1"
										 data-mycontrols=".my-nav-2"
										 data-myshow="false"
										 data-mycounttotal="false"
										 data-mycountcur="false"
										 data-myparallax="false"
										 data-wheel="false"
										 data-speed="600" 
										 data-timing="10000" 
										 data-loop="false" 
										 data-paging="true" 
										 data-arrows="true" 
										 data-animation="slide" 
										 data-auto="true" 
										 data-prev="<i class='fa fa-chevron-left'></i>" 
										 data-next="<i class='fa fa-chevron-right'></i>"> 
                                       
                                       
                                        <div class="custom-theme-slides">
                            
                                            <div class="item">
                                                <a href="#" rel="theme-slider-prettyPhoto[cat-1]"><img src="assets-demo/images/test-img-big-1.jpg" alt="Title 1" /></a>  
                                            </div>
                                            
                                            <div class="item">
                                                <a href="#" rel="theme-slider-prettyPhoto[cat-1]"><img src="assets-demo/images/test-img-big-2.jpg" alt="Title 2" /></a>
                                            </div>
                                            
                                            
                                            <div class="item">
                                                <a href="#" rel="theme-slider-prettyPhoto[cat-1]"><img src="assets-demo/images/test-img-big-3.jpg" alt="Title 3" /></a>
                                            </div>
                                
                            
                                        </div>
                                        <!-- .custom-theme-slides end -->
                                    </div>
                                    <!-- .custom-theme-flexslider end -->   
                                    
                                       
                                    <div class="custom-navigation my-nav-2">
                                        <a href="#" class="custom-theme-flex-prev"><i class="fa fa-chevron-left"></i></a>
                                        <div class="custom-controls-container my-nav-2"></div>
                                        <a href="#" class="custom-theme-flex-next"><i class="fa fa-chevron-right"></i></a>
                                    </div> 

                        
                                    <!-- Thumbnail ControlNav Pattern -->
                                    <div class="custom-theme-flexslider-thumbs my-navthumbs-1">
 										<ul>
											<li class="active"><img src="assets-demo/images/test-img-big-1.jpg" alt="" /></li>
											<li><img src="assets-demo/images/test-img-big-2.jpg" alt="" /></li>
											<li><img src="assets-demo/images/test-img-big-3.jpg" alt="" /></li>
										</ul>
							        </div>

                        
                        
                        </div>
                    </div>
              </div>   
      
      </section>    
                                        
                                          
                                
                <!-- Footer
        ============================================= -->    
        <footer class="footer-main-container">
            <div class="container">
				<nav class="pull-left">
					<ul>
						<li>
							<a href="https://uiux.cc">
								UIUX Lab
							</a>
						</li>
						<li>
							<a href="https://opensource.org/licenses/MIT">
								Licenses
							</a>
						</li>
						<li>
							<a href="https://github.com/xizon/uix-kit">
								Download
							</a>
						</li>
					</ul>
				</nav>
				<div class="pull-right">
					Copyright &copy; Uix Kit 2018.  |  All rights reserved. Created by UIUX Lab.
				</div>
              
            </div><!-- .container  end -->
        </footer>
        
        
    </div>
    <!-- .wrapper end -->
       
       
      

    <!-- Basic Script -->
	<script src="assets/js/min/jquery.mousewheel.min.js?ver=3.1.12"></script>
	<script src="assets/js/min/jquery.easing.min.js?ver=1.3"></script>
    <script src="assets/js/min/jquery.waitforimages.min.js?ver=1.0"></script>
    <script src="assets/js/min/video.min.js?ver=5.19"></script> 
	<script src="assets/js/min/jquery.waypoints.min.js?ver=4.0.1"></script> 
    <script src="assets/js/min/template7.min.js?ver=1.2.5"></script>

    
    <!-- Slideshow  -->
    <script src="assets/js/min/jquery.flexslider.min.js?ver=2.7.0"></script>
    
    <!-- Masonry -->
    <script src="assets/js/wp-jquery/masonry.min.js?ver=3.3.2"></script>
    <script src="assets/js/wp-jquery/imagesloaded.min.js?ver=4.1.0"></script>

    <!-- Filterable  -->
    <script src="assets/js/min/jquery.shuffle.min.js?ver=3.1.1"></script> 
    
    
    
	<!-- Your Plugins & Theme Scripts
	============================================= -->
	

    
    <!-- Theme Script -->
	<script>
        var wp_theme_custom_root_path = {
			"templateUrl" :"", //If the file is in the root directory, you can leave it empty; if in another directory, you can write: "/blog"
			"homeUrl"     :""  //Eg. https://uiux.cc
		};
    </script>  
    <script src="assets/js/uix-kit.min.js?ver=MTUyMjIwODEwNDM1Mg"></script>



	<!-- Your Plugins & Theme Scripts  end -->
    

	<script>
			/* Google analytics */
			(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
			(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
			m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
			})(window,document,'script','//www.google-analytics.com/analytics.js','ga');

			ga('create', 'UA-70658525-1', 'auto');
			ga('send', 'pageview');

	</script> 
    
 

  </body>
</html>


